<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>任务总览</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style type="text/css">
      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding: 15px;
      }
      
      .line {
        display: flex;
        margin-top: 10px;
      }
      
      .line>div {
        flex: 1;
      }
      .mui-navigate-right:after{
        color: inherit;
      }
      .between-list-item{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .between-list-item>span:first-child{
        white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">总览</h1>
    </header>
    <div class="mui-content" id="container" v-cloak>
      <div class="mui-card card_content">
        <div class="between-list-item">
          <span class="color-999">检修任务：</span>
          <span>{{detail.n}}</span>
        </div>
        <div class="between-list-item">
          <span class="color-999">任务负责人：</span>
          <span>{{detail.lun}}</span>
        </div>
        <div class="between-list-item">
          <span class="color-999">任务时间：</span>
          <span>{{formatDate(detail.st, 'yyyy-MM-dd hh:mm')}}-{{formatDate(detail.et, 'yyyy-MM-dd hh:mm')}}</span>
        </div>
      </div>
      <div class="mui-card card_content">
        <div class="between-list-item">
          <span class="color-999">区域/场站：</span>
          <span>{{detail.a}}/{{detail.s}}</span>
        </div>
        <div class="between-list-item">
          <span class="color-999">设备：</span>
          <span>{{detail.dn}}</span>
        </div>
        <div class="between-list-item">
          <span class="color-999">位置编码：</span>
          <span>{{detail.lc}}</span>
        </div>
        <div class="between-list-item">
          <span class="color-999">位置描述：</span>
          <span>{{detail.ld}}</span>
        </div>
        <div class="between-list-item">
          <span class="color-999">厂商/型号：</span>
          <span>{{detail.v}}/{{detail.m}}</span>
        </div>
        <div class="between-list-item">
          <span class="color-999">作业类型：</span>
          <span>{{detail.t1}}/{{detail.t2}}</span>
        </div>
      </div>
      <div class="mui-card card_content">
        <div class="padding-bottom-sm border-bottom">
          <span class="color-999">任务完成率：</span>
          <span>完成{{detail.tcr}}%</span>
        </div>
        <div class="border-bottom padding-bottom-sm">
          <div class="line">
            <div>
              <span class="color-999">工单人数：</span>
              <span>{{detail.wopc}}</span>
            </div>
            <div>
              <span class="color-999">工单人次：</span>
              <span>{{detail.wopt}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">总工时：</span>
              <span>{{detail.th}}</span>
            </div>
            <div>
              <span class="color-999">平均工时：</span>
              <span>{{detail.ah}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">车辆数量：</span>
              <span>{{detail.cc}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">通知单号：</span>
              <span>{{detail.nn}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">工单号：</span>
              <span>{{detail.won}}</span>
            </div>
          </div>
        </div>

        <div>
          <div class="line">
            <div>
              <span class="color-999">工作票数量：</span>
              <span>{{detail.tc}}</span>
            </div>
            <div>
              <span class="color-999">工作票关闭数量：</span>
              <span>{{detail.tcc}}</span>
            </div>
          </div>

          <div class="line">
            <div>
              <span class="color-blue" @click="toDetail">工序总数：</span>
              <span>{{detail.wpt }}</span>
            </div>
            <div>
              <span class="color-999">已完成数量：</span>
              <span>{{detail.wpcc}}</span>
            </div>
            <div>
              <span class="color-999">未完成数量：</span>
              <span>{{detail.wpuc}}</span>
            </div>
          </div>

          <div class="line">
            <div>
              <span class="color-999">异常数量：</span>
              <span>{{detail.wpac}}</span>
            </div>
            <div>
              <span class="color-999">关键敏感数量：</span>
              <span>{{detail.wpsc}}</span>
            </div>
          </div>
        </div>
      </div>
       <div class="flex justify-between padding-lr" style="position: relative;" v-if="detail.ta">
       	<div>验收记录</div>
       	<div class="color-blue"  @click="toDetail">详情<span class="padding-right mui-navigate-right color-blue"> </span></div>
       </div>
      <div class="mui-card card_content" v-if="detail.ta">
        <div class="">
          <div class="line">
            <div>
              <span class="color-999">提交时间：</span>
              <span>{{detail.ta.at}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">通知单号：</span>
              <span>{{detail.ta.nn}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">工单号：</span>
              <span>{{detail.ta.won}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">工作票号：</span>
              <span>{{detail.ta.wtn}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/mkeyplus.base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init()
      let self // 当前页面
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        self = plus.webview.currentWebview();
        vm.id = self.projectTaskId
        vm.getData()
      }
      let vm = new Vue({
        el: '#container',
        data: {
          id: 3,
          detail:{},
        },
        created() {
//         this.getData()
        },
        methods:{
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          getData() {
             let loading = plus.nativeUI.showWaiting('加载中')
            mui.baseApp.httpRequst('get', '/app/api/check/task/overview/' + this.id, {}, (res)=> {
              console.log(res)
              loading.close()
              res.tcr = isNaN(res.tcr) ? 0: Number((Number(res.tcr) * 100).toFixed(2))
              this.detail = res
            }, (err) => {
              loading.close()
            })
          },
          toDetail() {
            mui.baseApp.openWindow('./detail.html', {projectTaskId: this.id})
          }
        }
      })
    </script>
  </body>

</html>